

<template>
    <div class="container">

        案例管理
        <div class="project-container">
            <el-button style="margin-left: 90%;" type="primary" @click="handleAdd">新增案例</el-button>
            <el-row>
                <el-col v-for="(data, index) in visibleAnliList" :key="data.id" :span="8" :offset="index % 2 == 0 ? 2 : 4"
                    style="padding-bottom: 30px;">
                    <div class="case-card">
                        <img :src="data.img" class="case-image" />
                        <div class="case-content">
                            <el-collapse>
                                <el-collapse-item :title="data.title" name="1">
                                    <div>
                                        <span style="color: #999">案例详情：</span>
                                        <span style="color: #999"> {{ data.content }} </span>
                                    </div>
                                    <div class="bottom">
                                        <!-- Add the Edit button here -->
                                        <el-button type="text" @click="handleEdit(data.id)">编辑案例</el-button>
                                        <el-button type="text" style="padding-right: 20px;"
                                            @click="handleView(data)">查看案例</el-button>
                                        <el-button type="text" style="padding-right: 20px;"
                                            @click="handleDelete(data.id)">删除案例</el-button>
                                    </div>
                                    <div class="avatar-uploader">
                                        <el-upload action="http://localhost:9090/file/upload"
                                            :headers="{ token: user.token }" :show-file-list="false"
                                            :on-success="handleAvatarSuccess">
                                            <el-button size="small" type="primary">点击上传</el-button>
                                            <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
                                        </el-upload>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>
                </el-col>
                <el-pagination v-if="anliList.length > pageSize" class="pagination" @current-change="handlePageChange"
                    :current-page="currentPage" :page-size="pageSize" :total="anliList.length"></el-pagination>
            </el-row>

            <el-dialog title="新增案例" v-model="addCaseVis" width="60%">
                <el-card style="width:50%">
                    <div style="margin:15px;text-align:center">
                        <el-upload class="avatar-uploader" action="http://localhost:9090/file/upload"
                            :headers="{ token: user.token }" :show-file-list="false" :on-success="handleAvatarSuccess">
                            <el-image v-if="anli.img" :src="anli.img" class="avatar"></el-image>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                    <el-form :model="anli" label-width="80px" style="padding-right:20px">
                        <el-form-item label="案例名称" prop="title">
                            <el-input v-model="anli.title" placeholder="案例名称"></el-input>
                        </el-form-item>
                        <el-form-item label="案例详情" prop="content">
                            <el-input type="textarea" v-model="anli.content" placeholder="案例详情"></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="text-align:center; margin-bottom:20px">
                        <el-button type="primary" @click="insert">提交</el-button>
                    </div>
                </el-card>
            </el-dialog>

            <el-dialog title="编辑案例" v-model="editCaseVis" width="60%">
                <!-- 编辑项目弹窗的内容 -->
                <el-form :model="anli" label-width="80px" style="padding-right:20px">
                    <el-form-item label="案例名称" prop="title">
                        <el-input v-model="anli['title']" placeholder="案例名称"></el-input>
                    </el-form-item>
                    <el-form-item label="案例详情" prop="content">
                        <el-input type="textarea" v-model="anli['content']" placeholder="案例详情"></el-input>
                    </el-form-item>
                </el-form>
                <!-- 按钮区域 -->
                <div style="text-align: center; margin-top: 20px;">
                    <!-- 取消按钮，点击时调用 handleCancel 方法 -->
                    <el-button @click="handleCancel">取消</el-button>
                    <!-- 确定按钮，点击时调用 handleConfirm 方法 -->
                    <el-button type="primary" @click="handleConfirm">确定</el-button>
                </div>
            </el-dialog>

            <!-- 新增查看案例的弹窗 -->
            <el-dialog title="查看案例" :visible="viewCaseVis" width="60%" @close="handleViewClose">
                <div>
                    <el-image :src="viewCase.img" class="avatar"></el-image>
                    <div class="case-content">
                        <span style="color: #999">案例详情：</span>
                        <span style="color: #999"> {{ viewCase.content }} </span>
                        <div v-if="viewCase.docLink">
                            <span style="color: #999">Word 文档内容：</span>
                            <span style="color: #999">{{ viewCase.docContent }}</span>
                        </div>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import NavHeader from '../../components/common/NavHeader.vue'
import Fooder from '../../components/common/Fooder.vue'
import Top from '../../components/common/Top.vue'
import { ElMessageBox } from 'element-plus'
export default {

    data() {
        return {
            anli: {},
            anliList: [],
            user: JSON.parse(localStorage.getItem("honey-user") || '{}'),
            addCaseVis: false,
            editCaseVis: false,
            content: '',
            title: '',
            pageSize: 4, // 每页显示的案例数量
            currentPage: 1, // 当前页码
            viewCaseVis: false,  // 控制查看案例的弹窗显示与隐藏
            viewCase: {},       // 存储当前查看的案例信息
        }
    },
    computed: {
        // 计算属性，根据当前页和每页数量计算可见案例列表
        visibleAnliList() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.anliList.slice(start, end);
        },
    },
    methods: {
        async handleView(projectId) {
            try {
                // 使用项目ID获取项目详细信息
                console.log(1)
                const response = await this.$request.get(`/anli/${projectId}`);
                console.log(2)
                console.log(response.data[0].title)
                if (response.code == 200) {
                    // 将当前案例数据设置到 'viewCase' 属性中
                    this.viewCase = { ...response.data[0] };
                    // 打开查看案例的弹窗
                    this.viewCaseVis = true;
                } else {
                    this.$message.error(response.msg);
                }
            } catch (error) {
                console.error('获取案例详细信息时出错：', error);
            }
        },

        handleViewClose() {
            // 关闭查看案例的弹窗时清空数据
            this.viewCaseVis = false;
            this.viewCase = {};
        },
        handlePageChange(page) {
            this.currentPage = page;
        },
        async handleDelete(projectId) {
            try {
                // 调用 API 删除案例
                const response = await this.$request.delete(`/anli/delete/${projectId}`);
                if (response.code === 200) {
                    // 从案例列表中移除删除的案例
                    this.anliList = this.anliList.filter(item => item.id !== projectId);
                    this.$message.success('删除案例成功');
                    this.loadAnliList(); // 重新加载案例列表
                } else {
                    this.$message.error(response.msg);
                }
            } catch (error) {
                console.error('删除案例时出错：', error);
            }
        },
        // 重新加载案例列表的方法
        async loadAnliList() {
            try {
                const response = await this.$request.get("/anli/show");
                if (response.code === 200) {
                    this.anliList = response.data;
                } else {
                    this.$message.error(response.msg);
                }
            } catch (error) {
                // console.error('加载案例列表失败：', error);
                // 可选：加载失败提示
                // this.$message.error('加载案例列表失败，请重试');
            }
        },
        async handleConfirm() {
            if (typeof this.anli.id !== 'undefined' && !isNaN(parseInt(this.anli.id))) {
                // 调用 API 进行更新
                const response = await this.$request.put(`/anli/update/${this.anli.id}`, this.anli);
                this.editCaseVis = false;
                this.loadAnliList(); // 重新加载案例列表
                // 处理响应
            } else {
                console.error('无效或未定义的 ID');
            }
        },

        handleCancel() {
            this.editCaseVis = false;
        },
        async handleEdit(projectId) {
            try {
                // 使用项目ID获取项目详细信息
                const response = await this.$request.get(`/anli/${projectId}`);
                if (response.code == 200) {
                    // 将当前案例数据设置到'anli'属性中
                    this.anli = { ...response.data[0] };
                    console.log(response.data)
                    console.log(response.data[0].content)
                    // 打开编辑对话框
                    this.editCaseVis = true;
                    return this.anli;
                } else {
                    this.$message.error(response.msg);
                }
            } catch (error) {
                console.error('获取项目详细信息时出错：', error);
            }
        },
        handleAdd() {
            // console.log("新增案例")
            this.anli = {}  // 新增数据的时候清空数据
            this.addCaseVis = true   // 打开弹窗
        },
        closeEditor() {
            this.editorVisible = false
        },
        insert() {//保存当前用户信息到数据库
            this.$request.put("/anli/insert", this.anli).then(response => {
                if (response.code == 200) {
                    this.$message('更新成功')
                    this.forgetPassDialogVis = false
                    console.log("要刷新啦")
                    this.loadAnliList(); // 重新加载案例列表
                } else {
                    this.$message.error(response.msg);
                }
            })
        },
        handleAvatarSuccess(response, file, fileList) {
            this.anli.img = response.data;//把原来的头像替换成新上传的图片链接
        },
    },
    mounted() {
        this.$request.get("/anli/show").then(response => {
            if (response.code == 200) {
                this.anliList = response.data;
            } else {
                this.$message.error(response.msg);
            }
        })
    }

}
</script>

<style scoped>
.el-form-item__label {
    font-weight: bold;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.case-card {
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    overflow: hidden;
}

.case-image {
    width: 100%;
    /* 图片宽度 100% */
    max-height: 200px;
    /* 图片最大高度 */
    object-fit: cover;
    /* 保持纵横比并尽可能填充容器 */
}

.case-content {
    padding: 14px;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-container {
    border: 1px solid #d9d9d9;
    /* 添加边框样式 */
    padding: 20px;
    /* 可以根据需要调整边距 */
    border-radius: 5px;
    /* 可以根据需要调整边框圆角 */
    position: relative;
}

.pagination {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 50px;

}
</style>
